<template>
    <view class="article tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">{{ article.articleTitle }}</tn-navbar>
       
            <view class="article-content">
                <mp-html :content="article.articleContent"></mp-html>
            </view>
        
        <view class="empty-icon" v-if="emptyData">
            <tn-empty :show="emptyData" mode="data"></tn-empty>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnEmpty from "@/tuniao-ui/components/tn-empty/src/Empty.vue";
import { findArticleById } from "@/api/article"
import { onLoad } from "@dcloudio/uni-app";
import { ResultEnum } from "@/enums/httpEnum";
const emptyData = ref(false);

interface Article {
    id: number;
    articleClassifyId: number;
    articleTitle: string;
    cover: string;
    articleContent: string;
    status: number;
    sort: number;
    updateTime: number;
    createTime: number;
}
const articleId = ref(0);

const article: Article = reactive({
    id: 0,
    articleClassifyId: 0,
    articleTitle: '',
    cover: '',
    articleContent: '',
    status: 0,
    sort: 0,
    updateTime: 0,
    createTime: 0,
});

onLoad((options: any) => {
    if (options.articleId) {
        articleId.value = options.articleId;
        
        findArticleById({ id: articleId.value }).then((res: any) => {
            if (res.code === ResultEnum.SUCCESS) {
                const articleInfo = res.result;
                if (articleInfo.status === 1) {
                    Object.assign(article, articleInfo);
                } else {
                    emptyData.value = true;
                }
            } else {
                emptyData.value = true;
            }
        });
    } else {
        emptyData.value = true;
    }
});



</script>
  
<style lang="scss" scoped>
.empty-icon {
    margin-top: 50rpx;
}
.article-content {
    padding: 20rpx;
    background-color: #fff;
}
</style>
  